<template>
  <component is="a-modal" v-model:visible="visible" :width="1200" :title="title" :mask-closable="false"
    :ok-loading="loading" @cancel="close" @before-ok="submit" >
    <div style="height: 70vh;overflow-y: scroll;">
      <a-descriptions title="主体信息" :column="4" bordered size="large">
      <a-descriptions-item label="会员UID" :span="1">{{ detailInfo.info?.user_id }}</a-descriptions-item>
      <a-descriptions-item label="会员名" :span="1">{{ detailInfo.info?.user?.user_name }}</a-descriptions-item>
      <a-descriptions-item label="真实姓名" :span="1">{{ detailInfo.info?.user?.true_name }}</a-descriptions-item>
      <a-descriptions-item label="国家地区" :span="1">{{ detailInfo.info?.area?.name }}</a-descriptions-item>
      <a-descriptions-item label="主订单ID" :span="1">{{ detailInfo.info?.orderInfo?.id }}</a-descriptions-item>
      <a-descriptions-item label="主订单号" :span="1">{{ detailInfo.info?.orderInfo?.order_sn }}</a-descriptions-item>
      <a-descriptions-item label="申请时间" :span="1">{{ detailInfo.info?.create_time }}</a-descriptions-item>
      <a-descriptions-item label="售后状态" :span="1">{{ detailInfo.info?.state_text }} 【 {{ detailInfo.info?.type_text
      }} 】</a-descriptions-item>
      <a-descriptions-item label="会员会员反馈描述" :span="4">{{ detailInfo.info?.describe }}</a-descriptions-item>
    </a-descriptions>
    <div v-if="detailInfo.fileData && detailInfo.fileData.length>0">
      <div style="margin:10px 0">反馈图片｜视频</div>
      <div style="width: 100%; display: flex;">
        <div >
          <a-carousel :style="{ width: '400px', height: '540px' }" @change="change">
            <a-carousel-item v-for="(file,index) in detailInfo.fileData">
              <div  v-if="file.type=='image'">
                <a-image   :src="file.path" width="100%"  height="100%" />
              </div>
              
              <div v-else>
                <video :id="`my_video_${index}`"  class="video-js" controls width="400" height="540">
                  <source :src="file.path" type="application/x-mpegURL" />
                </video>
              </div>
            </a-carousel-item>
          </a-carousel>
        </div>

      </div>
    </div>
    <div style="margin:10px 0">商品信息</div>
    <a-table :columns="columns" :data="detailInfo.sku_list" :stripe="true" :pagination="false">

    </a-table>
    </div>
   


  </component>
</template>

<script setup>
import { ref, reactive, computed, watch, onBeforeUnmount, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import AsApi from '@/api/system/afterSale'
import { throttle } from "lodash";
import videojs from 'video.js';
import tool from '@/utils/tool'
import ENUMS from '@/utils/enums'
const emit = defineEmits(["success"]);
const visible = ref(false);
const loading = ref(false);
const spinLoading = ref(false)
let title = computed(() => {
  return "详情"
});
const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 200 },
  { title: 'SKU', dataIndex: 'sku', width: 200 },
  { title: '商品名称', dataIndex: 'goods_name', width: 200 },
  { title: '数量', dataIndex: 'num', width: 200 },
  { title: '收货状态', dataIndex: 'receive_state_text', width: 200 },
  { title: '检查状态', dataIndex: 'state_text', width: 200 },
])
const detailInfo = ref({})
const getData = async (id) => {////在頁面打開之前須加載完成要不然播放报錯
  const { data } = await AsApi.sign_for_detail(id)
  detailInfo.value = { ...data }
  data.fileData?.length>0? data.fileData?.forEach((item,index) => {
    if(item.type=='audio'){

      initVideo(item.path,index)
    }
    if(index==data.fileData?.length-1){
      visible.value = true;
    }
  }):visible.value = true;
}
const change=(index,prevIndex)=>{
  // if(detailInfo.value.fileData[index-1].type=='audio'){
  //   initVideo(detailInfo.value.fileData[index-1].path)
  // }
}
const player = ref(null)
const players = ref(null)
const initVideo = async (src,index) => {
  const existingPlayer = videojs.getPlayer(`my_video_${index}`)
  if (existingPlayer) {
    existingPlayer.dispose(); 
  }
  player.value = videojs(`my_video_${index}`, {
    techOrder: ['html5'],
    sources: [
      {
        src:  src,
        type: 'application/x-mpegURL',
      },
    ],
  });
  players.value?.push(player.value); 
}
// 打开弹框
const open = async (data) => {
  // visible.value = true;
  detailInfo.value={}
  spinLoading.value = true
  await getData(data.id)
};

onBeforeUnmount(() => {
      // 销毁所有播放器实例，避免内存泄漏
      players.value?.forEach((player) => {
        if (player) {
          player.dispose();
        }
      });
    });
// 关闭弹窗
const close = () => {
  visible.value = false
  players.value?.forEach((player) => {
        if (player) {
          player.dispose();
        }
  });
};
defineExpose({ open, getData });
</script>